html,
body {
  margin: 0;
  min-height: 100vh;
  min-width: 1280px;
}
.header {
  height: 80px;
}
.navbar {
  height: 46px;
}
.footer {
  height: 42px;
}
.main-body {
  min-height: calc(100vh - 193px);
  position: relative;
  box-sizing: border-box;
  width: 1280px;
  margin: 0 auto;
}
.content-box {
  box-sizing: border-box;
  display: inline-block;
  margin-left: 226px;
  margin-top: 20px;
  padding: 25px 45px;
  width: calc(1054px);
  min-height: 600px;
  box-shadow: 0 0 10px 2px #dbf2e6;
  background-color: #fcfefd;
  margin-bottom: 24px;
  border-radius: 4px;
}
.header {
  margin: 0 auto;
  min-width: 1280px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-image: url(../img/header_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.header .header-box {
  padding: 0 20px;
}
.header .header-box .header-left {
  float: left;
}
.header .header-box .header-left .logo {
  width: 187px;
  height: 51px;
  float: left;
  margin: 14px 14px 0 14px;
  background: url(../img/logo.png) no-repeat;
}
.header .header-box .header-left span {
  float: left;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  position: relative;
  padding: 0 12px;
}
.header .header-box .header-left span:after {
  content: '';
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, rgba(173, 218, 191, 0), #addabf, rgba(173, 218, 191, 0));
  position: absolute;
  top: 25px;
  left: 0px;
}
.header .header-box .header-right {
  font-size: 14px;
  float: right;
  color: #b0ffa1;
}
.header .header-box .header-right .user-info {
  float: left;
  cursor: pointer;
  margin-right: 15px;
  color: #e0ffa9;
}
.header .header-box .header-right .user-info .user-logo {
  float: left;
  width: 15px;
  height: 15px;
  background: url(../img/smile.png) no-repeat;
  margin-right: 5px;
  margin-top: 32px;
}
.header .header-box .header-right .user-info .user-name {
  color: #e0ffa9;
}
.header .header-box .header-right .person-set {
  float: left;
  padding: 0 15px;
  cursor: pointer;
  position: relative;
}
.header .header-box .header-right .person-set .person-set-logo {
  width: 20px;
  height: 22px;
  float: left;
  margin-right: 5px;
  margin-top: 30px;
  background: url(../img/pwd.png) no-repeat;
}
.header .header-box .header-right .person-set:after {
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  background: #66b28c;
  position: absolute;
  top: 32px;
}
.header .header-box .header-right .person-set:after {
  left: 0;
}
.header .header-box .header-right .person-set:before {
  right: 0;
}
.header .header-box .header-right .exit {
  float: left;
  cursor: pointer;
  color: #b0ffa1;
  text-decoration: none;
}
.header .header-box .header-right .exit .person-set-logo {
  width: 20px;
  height: 22px;
  float: left;
  margin-top: 29px;
  margin-right: 5px;
  background: url(../img/exit.png) no-repeat;
}
.navbar {
  margin: 0 auto;
  width: 1280px;
  height: 46px;
  line-height: 46px;
  background: #ebfef3;
  background: -webkit-linear-gradient(to bottom, #ebfef3, #e4f7ec, #dbf1e5);
  background: -moz-linear-gradient(to bottom, #ebfef3, #e4f7ec, #dbf1e5);
  background: -ms-linear-gradient(to bottom, #ebfef3, #e4f7ec, #dbf1e5);
  background: linear-gradient(to bottom, #ebfef3, #e4f7ec, #dbf1e5);
}
.navbar .navbar-list {
  padding-left: 60px;
  font-size: 16px;
  font-weight: bold;
}
.navbar .navbar-list li {
  float: left;
  padding-right: 30px;
  position: relative;
  cursor: pointer;
  zoom: 1;
}
.navbar .navbar-list li .shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 20%;
  height: 0;
}
.navbar .navbar-list li a {
  display: block;
  padding: 0 10px 0 35px;
}
.navbar .navbar-list li a i {
  width: 24px;
  height: 22px;
  float: left;
  margin: 14px 4px 0 0;
  background: url(../img/hdicon1.png) no-repeat;
}
.navbar .navbar-list li a i.produce-manage {
  background-position: 0 -3px;
}
.navbar .navbar-list li a i.package-manage {
  background-position: -32px -3px;
}
.navbar .navbar-list li a i.ciculate-manage {
  background-position: -63px -3px;
}
.navbar .navbar-list li a i.sell-manage {
  background-position: -90px -3px;
}
.navbar .navbar-list li a i.quality-manage {
  background-position: -120px -3px;
}
.navbar .navbar-list li a i.system-manage {
  margin: 12px 4px 0 0;
  background-position: -148px -3px;
}
.navbar .navbar-list li a span {
  color: #249258;
}
.navbar .navbar-list li:before {
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  background: rgba(71, 150, 108, 0.5);
  background: linear-gradient(to bottom, rgba(71, 150, 108, 0.5), #47966c, rgba(71, 150, 108, 0.5));
  position: absolute;
  top: 16px;
  left: 0;
}
.navbar .navbar-list li.active,
.navbar .navbar-list li.hover {
  background: #07733d;
  background: -webkit-linear-gradient(to bottom, #07733d, #139251, #18a65d);
  background: -moz-linear-gradient(to bottom, #07733d, #139251, #18a65d);
  background: -ms-linear-gradient(to bottom, #07733d, #139251, #18a65d);
  background: linear-gradient(to bottom, #07733d, #139251, #18a65d);
}
.navbar .navbar-list li.active .shadow,
.navbar .navbar-list li.hover .shadow {
  box-shadow: 0 0 80px 15px #fff;
}
.navbar .navbar-list li.active i.produce-manage,
.navbar .navbar-list li.hover i.produce-manage {
  background-position: 0 -32px;
}
.navbar .navbar-list li.active i.package-manage,
.navbar .navbar-list li.hover i.package-manage {
  background-position: -32px -32px;
}
.navbar .navbar-list li.active i.ciculate-manage,
.navbar .navbar-list li.hover i.ciculate-manage {
  background-position: -63px -32px;
}
.navbar .navbar-list li.active i.sell-manage,
.navbar .navbar-list li.hover i.sell-manage {
  background-position: -90px -32px;
}
.navbar .navbar-list li.active i.quality-manage,
.navbar .navbar-list li.hover i.quality-manage {
  background-position: -120px -32px;
}
.navbar .navbar-list li.active i.system-manage,
.navbar .navbar-list li.hover i.system-manage {
  background-position: -148px -32px;
}
.navbar .navbar-list li.active span,
.navbar .navbar-list li.hover span {
  color: #fff;
}
.navbar .navbar-list .first {
  margin-left: 0;
}
.navbar .navbar-list .first:before {
  display: none;
}
.leftbar {
  display: inline-block;
  width: 206px;
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 24px;
  box-shadow: 0 0 10px #dbf2e6;
}
.leftbar .title {
  height: 56px;
  line-height: 56px;
  background-image: url(../img/title_bg.png);
  background-repeat: no-repeat;
  background-position: 158px -4px;
  background-color: #027745;
  font-size: 16px;
}
.leftbar .title a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
.leftbar .title a i {
  float: left;
  width: 24px;
  height: 22px;
  margin: 17px 7px 0 38px;
  background: url(../img/icon0.png) no-repeat;
}
.leftbar .title a span {
  float: left;
  margin-left: 18px;
}
.leftbar .list li.item .itemTitle {
  display: block;
  height: 46px;
  line-height: 46px;
}
.leftbar .list li.item .itemTitle:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #daeae2;
  background-image: -webkit-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -moz-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -o-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -ms-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: linear-gradient(to right, #fff, #daeae2, #fff);
}
.leftbar .list li.item .itemTitle i {
  float: left;
  width: 22px;
  height: 22px;
  background: url(../img/leftbar.png) no-repeat;
  margin: 13px 27px 0 40px;
}
.leftbar .list li.item .itemTitle i.icon1 {
  background-position: 0 0;
}
.leftbar .list li.item .itemTitle i.icon2 {
  background-position: -30px 0;
}
.leftbar .list li.item .itemTitle i.icon3 {
  background-position: -63px 0;
}
.leftbar .list li.item .itemTitle i.icon4 {
  background-position: -95px 0;
}
.leftbar .list li.item .itemTitle i.icon5 {
  background-position: -125px 0;
}
.leftbar .list li.item .itemTitle i.icon6 {
  background-position: -152px 0;
}
.leftbar .list li.item .itemTitle i.icon7 {
  background-position: -180px 0;
}
.leftbar .list li.item .itemTitle i.icon8 {
  background-position: -207px 0;
}
.leftbar .list li.item .itemTitle i.icon9 {
  background-position: -235px 0;
}
.leftbar .list li.item .itemTitle span {
  color: #868a88;
  font-size: 14px;
}
.leftbar .list li.item .itemlist {
  display: none;
}
.leftbar .list li.item .itemlist:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #daeae2;
  background-image: -webkit-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -moz-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -o-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -ms-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: linear-gradient(to right, #fff, #daeae2, #fff);
}
.leftbar .list li.item .itemlist li {
  height: 50px;
  line-height: 50px;
}
.leftbar .list li.item .itemlist li a {
  color: #868a88;
  margin-left: 88px;
  position: relative;
}
.leftbar .list li.item .itemlist li a:before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 10px;
  background: #868a88;
  position: absolute;
  top: 7px;
  left: -15px;
}
.leftbar .list li.item .itemlist li:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #daeae2;
  background-image: -webkit-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -moz-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -o-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: -ms-linear-gradient(to right, #fff, #daeae2, #fff);
  background-image: linear-gradient(to right, #fff, #daeae2, #fff);
}
.leftbar .list li.item .itemlist li:hover a,
.leftbar .list li.item .itemlist li.active a {
  color: #00b111;
  font-weight: bold;
}
.leftbar .list li.item .itemlist li:hover a:before,
.leftbar .list li.item .itemlist li.active a:before {
  background: #00b111;
}
.leftbar .list li.item .itemlist li:hover:after,
.leftbar .list li.item .itemlist li.active:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #daeae2;
  background-image: -webkit-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: -moz-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: -o-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: -ms-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
}
.leftbar .list li.item.active a.itemTitle,
.leftbar .list li.item:hover a.itemTitle {
  background: #04a351;
}
.leftbar .list li.item.active a.itemTitle:after,
.leftbar .list li.item:hover a.itemTitle:after {
  background-image: none;
  background-color: #04a351;
}
.leftbar .list li.item.active a.itemTitle i.icon1,
.leftbar .list li.item:hover a.itemTitle i.icon1 {
  background-position: 0 -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon2,
.leftbar .list li.item:hover a.itemTitle i.icon2 {
  background-position: -30px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon3,
.leftbar .list li.item:hover a.itemTitle i.icon3 {
  background-position: -63px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon4,
.leftbar .list li.item:hover a.itemTitle i.icon4 {
  background-position: -95px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon5,
.leftbar .list li.item:hover a.itemTitle i.icon5 {
  background-position: -125px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon6,
.leftbar .list li.item:hover a.itemTitle i.icon6 {
  background-position: -152px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon7,
.leftbar .list li.item:hover a.itemTitle i.icon7 {
  background-position: -180px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon8,
.leftbar .list li.item:hover a.itemTitle i.icon8 {
  background-position: -207px -29px;
}
.leftbar .list li.item.active a.itemTitle i.icon9,
.leftbar .list li.item:hover a.itemTitle i.icon9 {
  background-position: -235px -29px;
}
.leftbar .list li.item.active a.itemTitle span,
.leftbar .list li.item:hover a.itemTitle span {
  color: #fff;
}
.leftbar .list li.item.active .itemlist,
.leftbar .list li.item:hover .itemlist {
  background: #e1f6e4;
}
.leftbar .list li.item.active .itemlist li,
.leftbar .list li.item:hover .itemlist li {
  height: 50px;
  line-height: 50px;
}
.leftbar .list li.item.active .itemlist li:after,
.leftbar .list li.item:hover .itemlist li:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #daeae2;
  background-image: -webkit-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: -moz-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: -o-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: -ms-linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
  background-image: linear-gradient(to right, #e1f6e4, #daeae2, #e1f6e4);
}
.leftbar1 .title a i {
  background: url(../img/hdicon1.png) no-repeat;
  background-position: 0 -32px;
}
.leftbar1 .title a span {
  float: left;
  margin-left: 18px;
}
.leftbar1 .list li.item .itemTitle i {
  background: url(../img/leftbar1.png) no-repeat;
  margin: 13px 27px 0 40px;
}
.leftbar1 .list li.item .itemTitle i.icon1 {
  background-position: 0 0;
}
.leftbar1 .list li.item .itemTitle i.icon2 {
  background-position: -29px 0;
}
.leftbar1 .list li.item .itemTitle i.icon3 {
  background-position: -58px 0;
}
.leftbar1 .list li.item .itemTitle i.icon4 {
  background-position: -87px 0;
}
.leftbar1 .list li.item .itemTitle i.icon5 {
  background-position: -116px 0;
}
.leftbar1 .list li.item .itemTitle i.icon6 {
  background-position: -145px 0;
}
.leftbar1 .list li.item .itemTitle i.icon7 {
  background-position: -174px 0;
}
.leftbar1 .list li.item .itemTitle i.icon8 {
  background-position: -203px 0;
}
.leftbar1 .list li.item.active a.itemTitle i.icon1,
.leftbar1 .list li.item:hover a.itemTitle i.icon1 {
  background-position: 0 -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon2,
.leftbar1 .list li.item:hover a.itemTitle i.icon2 {
  background-position: -29px -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon3,
.leftbar1 .list li.item:hover a.itemTitle i.icon3 {
  background-position: -58px -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon4,
.leftbar1 .list li.item:hover a.itemTitle i.icon4 {
  background-position: -87px -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon5,
.leftbar1 .list li.item:hover a.itemTitle i.icon5 {
  background-position: -116px -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon6,
.leftbar1 .list li.item:hover a.itemTitle i.icon6 {
  background-position: -145px -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon7,
.leftbar1 .list li.item:hover a.itemTitle i.icon7 {
  background-position: -174px -29px;
}
.leftbar1 .list li.item.active a.itemTitle i.icon8,
.leftbar1 .list li.item:hover a.itemTitle i.icon8 {
  background-position: -203px -29px;
}
.leftbar2 .title a i {
  background: url(../img/hdicon1.png) no-repeat;
  background-position: -32px -32px;
}
.leftbar2 .title a span {
  float: left;
  margin-left: 18px;
}
.leftbar2 .list li.item .itemTitle i {
  background: url(../img/leftbar2.png) no-repeat;
  margin: 13px 27px 0 40px;
}
.leftbar2 .list li.item .itemTitle i.icon1 {
  background-position: 0 0;
}
.leftbar2 .list li.item .itemTitle i.icon2 {
  background-position: -30px 0;
}
.leftbar2 .list li.item .itemTitle i.icon3 {
  background-position: -58px 0;
}
.leftbar2 .list li.item .itemTitle i.icon4 {
  background-position: -87px 0;
}
.leftbar2 .list li.item .itemTitle i.icon5 {
  background-position: -117px 0;
}
.leftbar2 .list li.item .itemTitle i.icon6 {
  background-position: -146px 0;
}
.leftbar2 .list li.item.active a.itemTitle i.icon1,
.leftbar2 .list li.item:hover a.itemTitle i.icon1 {
  background-position: 0 -30px;
}
.leftbar2 .list li.item.active a.itemTitle i.icon2,
.leftbar2 .list li.item:hover a.itemTitle i.icon2 {
  background-position: -30px -30px;
}
.leftbar2 .list li.item.active a.itemTitle i.icon3,
.leftbar2 .list li.item:hover a.itemTitle i.icon3 {
  background-position: -58px -30px;
}
.leftbar2 .list li.item.active a.itemTitle i.icon4,
.leftbar2 .list li.item:hover a.itemTitle i.icon4 {
  background-position: -87px -30px;
}
.leftbar2 .list li.item.active a.itemTitle i.icon5,
.leftbar2 .list li.item:hover a.itemTitle i.icon5 {
  background-position: -117px -30px;
}
.leftbar2 .list li.item.active a.itemTitle i.icon6,
.leftbar2 .list li.item:hover a.itemTitle i.icon6 {
  background-position: -146px -30px;
}
.leftbar3 .title a i {
  background: url(../img/hdicon1.png) no-repeat;
  background-position: -63px -32px;
}
.leftbar3 .title a span {
  float: left;
  margin-left: 18px;
}
.leftbar3 .list li.item .itemTitle {
  /*i.icon2{
					background-position: -30px 0;
				}
				i.icon3{
					background-position: -59px 0;
				}*/
}
.leftbar3 .list li.item .itemTitle i {
  background: url(../img/leftbar3.png) no-repeat;
  margin: 13px 27px 0 40px;
}
.leftbar3 .list li.item .itemTitle i.icon1 {
  background-position: 0 0;
}
.leftbar3 .list li.item .itemTitle i.icon2 {
  background-position: -59px 0;
}
.leftbar3 .list li.item.active a.itemTitle,
.leftbar3 .list li.item:hover a.itemTitle {
  /*i.icon2{
					background-position: -30px -30px;
				}
				i.icon3{
					background-position: -59px -30px;
				}*/
}
.leftbar3 .list li.item.active a.itemTitle i.icon1,
.leftbar3 .list li.item:hover a.itemTitle i.icon1 {
  background-position: 0 -30px;
}
.leftbar3 .list li.item.active a.itemTitle i.icon2,
.leftbar3 .list li.item:hover a.itemTitle i.icon2 {
  background-position: -59px -30px;
}
.leftbar4 .title a i {
  background: url(../img/hdicon1.png) no-repeat;
  background-position: -90px -32px;
}
.leftbar4 .title a span {
  float: left;
  margin-left: 18px;
}
.leftbar4 .list li.item .itemTitle i {
  background: url(../img/leftbar4.png) no-repeat;
  margin: 15px 27px 0 40px;
}
.leftbar4 .list li.item .itemTitle i.icon1 {
  background-position: 0 0;
}
.leftbar4 .list li.item .itemTitle i.icon2 {
  background-position: -30px 0;
}
.leftbar4 .list li.item .itemTitle i.icon3 {
  background-position: -59px 0;
}
.leftbar4 .list li.item .itemTitle i.icon4 {
  background-position: -88px 0;
}
.leftbar4 .list li.item .itemTitle i.icon5 {
  background-position: -117px 0;
}
.leftbar4 .list li.item .itemTitle i.icon6 {
  background-position: -148px 0;
}
.leftbar4 .list li.item.active a.itemTitle i.icon1,
.leftbar4 .list li.item:hover a.itemTitle i.icon1 {
  background-position: 0 -30px;
}
.leftbar4 .list li.item.active a.itemTitle i.icon2,
.leftbar4 .list li.item:hover a.itemTitle i.icon2 {
  background-position: -30px -30px;
}
.leftbar4 .list li.item.active a.itemTitle i.icon3,
.leftbar4 .list li.item:hover a.itemTitle i.icon3 {
  background-position: -59px -30px;
}
.leftbar4 .list li.item.active a.itemTitle i.icon4,
.leftbar4 .list li.item:hover a.itemTitle i.icon4 {
  background-position: -88px -30px;
}
.leftbar4 .list li.item.active a.itemTitle i.icon5,
.leftbar4 .list li.item:hover a.itemTitle i.icon5 {
  background-position: -117px -30px;
}
.leftbar4 .list li.item.active a.itemTitle i.icon6,
.leftbar4 .list li.item:hover a.itemTitle i.icon6 {
  background-position: -148px -30px;
}
.footer {
  min-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 15px 0 10px 0;
  box-shadow: 0 -1px 10px #dbf2e6;
}
.footer p {
  line-height: 20px;
  font-size: 12px;
  color: #9f9f9f;
  text-align: center;
}
